﻿<!DOCTYPE html>
<html>
 <head>
  <title>2.5维地图DEMO</title>
  <meta http-equiv="X-UA-Compatible" content="IE=8;text/html;charset=utf-8" />
  <t:base type="jquery,easyui,tools,DatePicker"></t:base>

<script type="text/javascript" src="http://localhost:9999/jeecg-bpm/plug-in/gis/alMap/lib/ChrhcMap.Include2.js"></script>
<script type="text/javascript" src="http://localhost:9999/jeecg-bpm/plug-in/tools/curdtools_zh-cn.js"></script>
<script type="text/javascript" src="http://localhost:9999/jeecg-bpm/plug-in/jquery/jquery-1.8.3.js"></script>
<script type="text/javascript" src="http://localhost:9999/jeecg-bpm/plug-in/tools/dataformat.js"></script>
<link id="easyuiTheme" rel="stylesheet" href="http://localhost:9999/jeecg-bpm/plug-in/easyui/themes/default/easyui.css" type="text/css"></link>
<link rel="stylesheet" href="http://localhost:9999/jeecg-bpm/plug-in/easyui/themes/icon.css" type="text/css"></link>
<link rel="stylesheet" type="text/css" href="http://localhost:9999/jeecg-bpm/plug-in/accordion/css/accordion.css">
<link rel="stylesheet" type="text/css" href="http://localhost:9999/jeecg-bpm/plug-in/accordion/css/icons.css">
<script type="text/javascript" src="http://localhost:9999/jeecg-bpm/plug-in/easyui/jquery.easyui.min.1.3.2.js">
</script><script type="text/javascript" src="http://localhost:9999/jeecg-bpm/plug-in/easyui/locale/zh-cn.js">
</script><script type="text/javascript" src="http://localhost:9999/jeecg-bpm/plug-in/tools/syUtil.js"></script>
<script type="text/javascript" src="http://localhost:9999/jeecg-bpm/plug-in/My97DatePicker/WdatePicker.js"></script>
<link rel="stylesheet" href="http://localhost:9999/jeecg-bpm/plug-in/tools/css/common.css" type="text/css"></link>
<script type="text/javascript" src="http://localhost:9999/jeecg-bpm/plug-in/lhgDialog/lhgdialog.min.js"></script>
<script type="text/javascript" src="http://localhost:9999/jeecg-bpm/plug-in/tools/curdtools_zh-cn.js"></script>
<script type="text/javascript" src="http://localhost:9999/jeecg-bpm/plug-in/tools/easyuiextend.js"></script>


	 <%
		String enableLayerControl = (String)request.getParameter("enableLayerControl");
		//String urlConfigString = 	request.getParameter("config");
		//String urlConfigString =  (String)request.getAttribute("config");
		
	%>	
    <script type="text/javascript">

        var baseMap, eyeMap;
		var cMap;
		var entityAdded=false;
		var entityLayer ;
		var currentLayer;
		var mapHeight = 900;
		var mapWidth =1800;
		var layerControl;
		var urlConfigString = '${config}';
		var centerTo = null; 
		var coords = null;
		var drawType = null;
		var enableEdit = null;
		var drawPointEndCallBack = null;
		var drawLineEndCallBack = null;
		var enableSpotClick = null;
		var gisid = null;
		var gisname = null;
		var enableLayerControl =UtilMisc.getQueryString("enableLayerControl");
		var contextPath;
		var urlConfigString = UtilMisc.getQueryString("config");
			//var style = UtilMisc.getQueryString("style");
			//alert(urlConfigString+style);
			//alert(urlConfigString);
			//debugger;
			if(urlConfigString!=null&&urlConfigString!=""){
				var urlConfig = eval('(' + urlConfigString + ')');
				
			if(urlConfig!=null){
				 centerTo = urlConfig.centerTo;
				 coords = urlConfig.coords;
				 //alert(coords);
				 gisid = urlConfig.gisid;
				 gisname = urlConfig.gisname;
				 drawType = urlConfig.drawType;
				 enableEdit = urlConfig.enableEdit;
				 mapWidth = urlConfig.mapWidth==null?1500:urlConfig.mapWidth-5;
				 mapHeight = urlConfig.mapHeight==null?900:urlConfig.mapHeight-5;
				 drawPointEndCallBack = urlConfig.drawPointEndCallBack;
				 drawLineEndCallBack = urlConfig.drawLineEnd;

				 enableSpotClick = urlConfig.enableSpotClick==undefined?true:urlConfig.enableSpotClick;
				 
			}
				
			}
			
        function InitMap() {
        	contextPath = UtilMisc.getContextPath();
		/*
		config:{
			name:"测试3",
			id:"3",
			centerTo:"",
			drawType:"point",
			enableEdit:"",
			coords :'10636,14728.5,10608,14890.5,11656,14466.5,10590,14568.5,10544,14276.5,10636,14728.5',// coordsArr[index],//收尾相接是面
			style:{
				Size:5,
				FillColor:'#ff3300',
				Strokecolor:'#ff8300',
				Opacity:0.4,
				Dashstyle:"longdash"//线段样式(IE下有效)，可用：solid|dot|dash|dashdot|longdash|longdashdot|longdashdotdot|shortdot|shortdash|shortdashdot|shortdashdotd
			}
		}
		*/
		 $("#giscoords").val(coords);
		$("#gisname").val(gisname);
		$("#gisid").val(gisid);
			var option={ 
				mapId:"mapDiv",
				centerTo:centerTo,
				mapWidth:mapWidth,
				mapHeight:mapHeight,
				showCenter:false,
				callBack:initBussinesFunction//地图初始化完毕后执行的方法
				};
			   cMap = new ChrhcMap(option);
        }
		function initBussinesFunction(map){
			baseMap = map;
			
			//#################################自动画图并编辑部分##############################
			var shapeType;
			if(urlConfig!=null){
				if(coords!=null){
				shapeType = ChrhcMap_Business_Functions.getCooordsType(coords);
				var dataSource  = [urlConfig];	
				for(var i=0;i<dataSource.length;i++){
					dataSource[i].style ={
										Size:5,
										Color:'#ff3300',
										FillColor:'#ff3300',
										Strokecolor:'#ff8300',
										Opacity:0.8,
										Dashstyle:"dashdot"//线段样式(IE下有效)，可用：solid|dot|dash|dashdot|longdash|longdashdot|longdashdotdot|shortdot|shortdash|shortdashdot|shortdashdotd
									}
					dataSource[i].id = dataSource[i].id==null?i:dataSource[i].id;
				}
				var layerConfig = {
						map:cMap,//初始化地图返回的地图对象
						layerName:"画图",
						editEvent:{onDragStick:onDragCompleteEvent,onDrawEnd:drawPointEnd},//仅当config.enableEdit==true，且画图类型为线、面时有效
						dataSource:dataSource
					};
				
					if(shapeType ==ChrhcMapConfig.entityPoint){
						var markerConfig = {baseMap:baseMap,symbleType:"Markers",markerUrl:ChrhcMapConfig.getPointMarkerUrl};
						var markerSymble = new ChrhcMap.Symble(markerConfig);
							layerConfig.layerType = "Entitys";
							layerConfig.symble = markerSymble;
						
					}else if(shapeType == ChrhcMapConfig.shapeLine||shapeType == ChrhcMapConfig.shapePolygon){
							layerConfig.layerType = "Vector";
							
					} 
					
					currentLayer = new ChrhcMap.Layer(layerConfig);
					if(enableEdit&&currentLayer!=null){
						currentLayer.enableEdit(enableEdit,true);
					}
				}				
			}
			if(enableEdit&&(shapeType!=drawType)){
				drawNewData(drawType,drawPointEnd,drawLineEnd);
			}
			if(enableSpotClick){
				cMap.enableSpotClick(spotClickCallBackEvent);
			}
			if(enableLayerControl){
				initLayerControl();
			}
			
			
		
	}
		function drawNewData(drawType,drawPointEndEvent,drawVectorEndEvent){
			//#################################手工绘图部分##############################
			 				//layerType = drawType==ChrhcMapConfig.entityPoint?ChrhcMapConfig.entityPoint:ChrhcMapConfig.vectorLayerType;
				
							switch (drawType)
							{
					
								case "point":
									var callBack = drawPointEndEvent==null?drawPointEnd:drawPointEndEvent;
										
										ChrhcMap_Business_Functions.getPoint(cMap,callBack,spotClickCallBackEvent);
										
										enableSpotClick = false;	
								  break;
								case "line":
									//var callBack = drawEndEvent==null?drawLineEnd:drawEndEvent
										ChrhcMap_Business_Functions.getPolyLine(cMap,drawVectorEndEvent);
								  break;
								case "polygon":
									//var callBack = drawPointEndCallBack==null?drawLineEnd:drawLineEndCallBack
										ChrhcMap_Business_Functions.getPolygon(cMap,drawVectorEndEvent);
								  break;
								 default:
									 ChrhcMap_Business_Functions.getPolygon(cMap,drawVectorEndEvent);
								 break;
							}
		}
		function initContextMenu(visible1,visible2,visible3){
			var contextMenu = [{Key:"addNewData",Caption:"新建",Visible:visible1,CallBack:contextMenuAddNewLayerDataEvent},
							   {Key:"editOldData",Caption:"修改",Visible:visible2,CallBack:contextMenuAddNewLayerDataEvent},
							   {Key:"submitEditedData",Caption:"提交",Visible:visible3,CallBack:contextMenuAddNewLayerDataEvent}];
			cMap.showContextMenu(true,contextMenu,layerControl);

		}
		function resetContexMenu(visible1,visible2,visible3){
			var contextMenu = [{Key:"addNewData",Caption:"新建",Visible:visible1,CallBack:contextMenuAddNewLayerDataEvent},
							   {Key:"editOldData",Caption:"修改",Visible:visible2,CallBack:contextMenuAddNewLayerDataEvent},
							   {Key:"submitEditedData",Caption:"提交",Visible:visible3,CallBack:contextMenuAddNewLayerDataEvent}];
			cMap.resetContexMenu(contextMenu,layerControl);
			
		}
		var addOrEditTargetLayerId;
		var dataId ;
		var dataName;
		var dataCoords;
		var menuKey;
		var addOrEditUrl;
		var lastContextMenuId;
		var editCurrentLayerType;
		function contextMenuAddNewLayerDataEvent(e){
			
			var key = e.key;
			var selectedLayers = getChecked();
			/*
			新建对象：先画图，画图结束后再根据addurl打开新窗口，同时将画图结果传递给新窗口
			*/
			if(key =="addNewData"){
				
				if(selectedLayers!=null&&selectedLayers.length==1){
					var layertype = layerControlHashMap.get(selectedLayers[0]).layertype;
					drawNewData(layertype,drawNewPointLayerDataEndEvent,drawNewVectorLayerDataEndEvent);
					//initContextMenu(true,false,true);
					addOrEditTargetLayerId = selectedLayers[0];
					var currentLayer = layerControlHashMap.get(addOrEditTargetLayerId);
					if(currentLayer!=undefined){
						//addurl,editurl
						//var  addurl = contextPath+"/chrhcFormBuildController.do?ftlForm&tableName=sc_sqjj&mode=read&load=detail&id="+dataId;
						addOrEditUrl = contextPath+"/"+currentLayer.addurl;
					}
				}else{
					alert("请选择一个图层");
					initContextMenu(true,true,false);
				}
				
			}else
			/*
			修改已有对象：先对选中的图层进行修改，修改结束后再根据editurl打开新窗口，同时将画图结果传递给新窗口
			*/
			if(key =="editOldData"){
					dataId = e.id;
					dataName = e.name;
					dataCoords = e.coords;
					addOrEditTargetLayerId = e.layerId;
				if(addOrEditTargetLayerId==null||addOrEditTargetLayerId==undefined){
					initContextMenu(true,true,false);
					alert("请选中要编辑的对象");
				}else{
					var currentLayer = layerControlHashMap.get(addOrEditTargetLayerId);
					
					if(currentLayer!=undefined&&currentLayer.layertype!="point"){
						initContextMenu(true,false,true);
						//resetContexMenu(true,false,true);
					}
					if(currentLayer!=undefined){
						//addurl,editurl
						//var  addurl = contextPath+"/chrhcFormBuildController.do?ftlForm&tableName=sc_sqjj&mode=read&load=detail&id="+dataId;
						addOrEditUrl = contextPath+"/"+currentLayer.editurl+dataId;
						editCurrentLayerType = currentLayer.layertype;
					}
					
				}
				
			}else
			/*
			新建对象：先画图，画图结束后再根据addurl打开新窗口，同时将画图结果传递给新窗口
			*/
			if(key =="submitEditedData"){
				var coords ;
				var dataId;
				//drawNewData("polygon",drawNewLayerPointDataEndEvent,drawNewLayerDataEndEvent);
				if(lastContextMenuId=="editOldData"){
					layerControl.enableEdit(false,[addOrEditTargetLayerId]);
				}
				initContextMenu(true,true,false);
				var title="业务信息",width=900,height=600;
				//alert(addOrEditUrl);
				createwindow(title, addOrEditUrl+"&id="+dataId+"&gisxy="+coords,width,height);
				
				/*
				提交后，需要将坐标串、当前数据ID，传递给新打开的窗口
				*/
			}
			lastContextMenuId=key;
			
		}
		function drawNewVectorLayerDataEndEvent(e){
			//alert("当前所画的图形的ID为："+e.shapeId+" 坐标串为："+e.coords);
			$("#giscoords").val(e.coords);
			$("#gisid").val(e.shapeId);
			var coords = $("#giscoords").attr("value");
			var selectedLayers = getChecked();
				alert("添加地址："+addOrEditUrl+"&gisxy="+coords);
			var layerId = selectedLayers[0];

				ChrhcMap_Business_Functions.stopDraw(cMap);
			var dataSource = [{
					name:"",
					id:e.shapeId,
					coords:coords,
					style:{
						Size:5,
						FillColor:'#ff3300',
						Strokecolor:'#ff8300',
						Opacity:0.4,
						Dashstyle:"longdash"}
				}];
				layerControl.addData(layerId,dataSource);
			var title="业务信息",width=900,height=600;
				//alert(addOrEditUrl);
				createwindow(title, addOrEditUrl+"&gisxy="+e.coords,width,height);
				initContextMenu(true,true,false);
			/*
			此处将获取的坐标串传递给新打开的窗口
			*/
			
		}
		/*
		return :id,name, coords
		*/
		function drawNewPointLayerDataEndEvent(id,name, coords){
			alert("当前所画的图形ID===="+id+"坐标串："+coords);
			ChrhcMap_Business_Functions.stopDraw(cMap);
			var title="业务信息",width=900,height=600;
			var layerRow = layerControlHashMap.get(addOrEditTargetLayerId);
			var eventUrl = layerRow.addurl;
			var  addurl = contextPath+"/"+eventUrl+"&gisxy="+coords;
			var dataSource = [{
					name:id,
					id:id,
					coords:coords	
				}];
			layerControl.addData(addOrEditTargetLayerId,dataSource);
			createwindow(title, addurl,width,height);
			
			layerControl.enableEdit(false,[addOrEditTargetLayerId]);
			initContextMenu(true,true,false);
			
			/*
			此处将获取的坐标串传递给新打开的窗口
			*/

		}
		
	var layerControlGroup=0;
	/*
	图层控制模块初始化完毕后的回调方法
	*/
	function initEndCallBackFunction(data){
		layerControlGroup++;
		var ul = " <ul id=\"data"+layerControlGroup+"\" class=\"easyui-tree\" data-options=\"checkbox:true\"></ul>";
		 $("#treeData").append(ul);
		 $("#data"+layerControlGroup).tree({ data: data, onClick: function (node) {  
                 
              }  
              });  
		 
	}
	function onLayerClickEvent(e){
		var dataID ;
		var layerId;
		if(e!=null){
			dataID = e.id;
			layerId = e.layerId;			
			layerControlClickInfoWindowHtml(dataID,layerId);
		}
			
	}
	function layerControlClickInfoWindowHtml(dataId,layerId){
		var title="详细信息",width=900,height=600;
		var layerRow = layerControlHashMap.get(layerId);
		var eventUrl = layerRow.clickurl;
		var clickurl = contextPath+"/"+eventUrl+dataId;
		createwindow(title, clickurl,width,height);
		
	}
	function layerControlEditUpdateWindowHtml(dataId,layerId,coords){
		var title="业务信息",width=900,height=600;
		var layerRow = layerControlHashMap.get(layerId);
		var eventUrl = layerRow.editurl;
		var editurl = contextPath+"/"+eventUrl+dataId+"&gisxy="+coords;
			createwindow(title, editurl,width,height);
		
	}
		/*建筑物点击时触发
		e.Name:建筑物名称
		e.ID:建筑物ID
		e.Coords:建筑物坐标串
		*/
		function spotClickCallBackEvent(e){
		alert("ID:"+e.ID+" , 名称："+e.Name+" ,坐标串为："+e.Coords);
		$("#gisname").val(e.Name);
		$("#gisid").val(e.ID);
			/*
			此处编写自己的业务流程
			*/
		}
		function clickEvent(e){
			//alert("当前是自定义点击事件"+e.name);
			//e.removeNode();
			//alert("当前选择的对象是"+e.name+" ID:"+e.id);
			/*
			此处自定义选择某个对象后触发的相关事件，比如说：根据ID进行查询
			*/
		}
		function onmouseover(e){
			//alert("当前是自定义鼠标经过事件"+e.name);
		}
		function editCompleteEvent(e1,e2){
			//alert("自定义编辑结束事件"+e1.GetCoords());
		}
		/*
		e:dom;dom.entityInfo={X:123,Y:123,autoresize:false,W:70,H:30,exX:0,exY:0,enableEdit:false,autoremove:false,autozoomchangeremove:false}
		*/
		function onDragCompleteEvent(id,name,coords){
			
			//alert("当前编辑的实体ID是:"+id+"== 名称是"+name+" 坐标串："+coords);
			$("#giscoords").val(coords);
			$("#gisname").val(name);
			$("#gisid").val(id);
			/*
			此处可以对当前编辑过的对象进行数据库的更新操作
			*/
		}
		function onLayerControlDragCompleteEvent(id,name,coords){
			if(editCurrentLayerType=="point"){
				layerControl.enableEdit(false,[addOrEditTargetLayerId]);
				initContextMenu(true,true,false);
			}
			layerControlEditUpdateWindowHtml(id,addOrEditTargetLayerId,coords);
			$("#giscoords").val(coords);
			$("#gisname").val(name);
			$("#gisid").val(id);
			/*
			此处可以对当前编辑过的对象进行数据库的更新操作
			*/
		}
		/*
		return :id,name, coords
		*/
		function drawPointEnd(id,name, coords){
			alert("当前所画的图形ID:"+id+"坐标串："+coords+"name"+name);
			$("#giscoords").val(coords);
			$("#gisname").val("");
			$("#gisid").val("");
		}
		/*
		var callBackObject = {shapeId:shapeId,coords:coords};
		*/
		function drawLineEnd(e){
			//alert("当前所画的图形的ID为："+e.shapeId+" 坐标串为："+e.coords);
			$("#giscoords").val(e.coords);
			/*
			此处可以进行数据的提交
			*/
		}
		function getChecked(){
			 //$("#data"+layerControlGroup)
			 var showLayer = [];
			for(var j=1;j<layerControlGroup+1;j++){
				
				var nodes = $("#data"+j).tree('getChecked');			
				for(var i=0; i<nodes.length; i++){
					
					var key = nodes[i].id;
						if(key!=null&&key.indexOf("folder")==-1){
							showLayer.push(key);
						}
				}
			}
			return showLayer;
			
		
		}
		function showLayer(){
			var showLayer = getChecked();
				layerControl.showLayers(showLayer);
		}
		function showQueryResult(){
			
		}
		function centerTo1(x,y){
			cMap.setCenter(x,y);
		}
		function initLayerControl(){
			//chrhcAutoListController.do?datagrid&configId=sc_gislayer&field=id,name,layertype,status,deleted,create_name,create_by,create_date,update_name,update_by,update_date,datasql,clickurl,hoverurl,editurl,addurl,&biztype=
			var url=contextPath+"/chrhcAutoListController.do?datagrid&configId=sc_gislayer&field=id,name,layertype,status,deleted,create_name,create_by,create_date,update_name,update_by,update_date,datasql,clickurl,hoverurl,editurl,addurl,&biztype=";//"/scGislayerController.do?datagrid&field=id,name,layertype,status,deleted,create_name,create_by,create_date,update_name,update_by,update_date,datasql,clickurl,hoverurl,addurl,editurl";
			var type = "post";
			var where =null;
			var callBack = initLayerControlData;
			
			var query = new ChrhcMap.Query(url,type,where,callBack,this);
			query.execute(where);
			initLayerControlHtml();
			
		}
		function initLayerControlHtml(){
			var layerControlDiv = new Array();
				layerControlDiv.push(" <div id=\"w\" class=\"easyui-window\" data-options=\"title:'图层控制'\"  style=\" top: 90px; left:300px;width:260px;height:300px;\">");
				layerControlDiv.push(" <div class=\"easyui-layout\" data-options=\"fit:true\">");
				layerControlDiv.push(" <div id=\"treeData\" data-options=\"region:'center',border:false\" style=\"padding:10px;background:#fff;border:1px solid #ccc;\">");

				layerControlDiv.push(" </div>");
				layerControlDiv.push(" <div data-options=\"region:'south',border:false\" style=\"text-align:center;padding:5px 0;\">");
				layerControlDiv.push(" <a class=\"easyui-linkbutton\"  href=\"javascript:void(0)\" onclick=\"showLayer()\">显示选中</a>");	
				layerControlDiv.push(" </div>");
				layerControlDiv.push(" </div>");
			$("#layerControl").append.display = "";
		 	$("#layerControl").append(layerControlDiv.join(""));
		}
		var layerControlHashMap;
		function initLayerControlData(jsonData,isObject){
			//alert(jsonData);
			layerControlHashMap = new HashMap();
			var data;
			if(!isObject){
				data = eval('(' + jsonData + ')');
			}
			if(isObject){
				data = jsonData;
			}
			var rows = data.rows;
			var dataSource = [];
			var url = contextPath+"/scGislayerController.do?getData";
			for(var i=0;i<rows.length;i++){
				var name = rows[i].name;
				var id = rows[i].id;
				var layertype = rows[i].layertype;
				var data = {
						layerType:layertype,
						layerName:id,
						layerId:id,
						layerZhName:name,
						url:url+"&id="+id,
						where:"where",
						visible:true
						};
				dataSource.push(data);
				
				layerControlHashMap.put(id,rows[i]);
					
			}
						
			var layerControlData=[{
						//folderName:"所有图层",
						dataSource:dataSource
					}];
		 layerControl =  new ChrhcMap.LayerControl(cMap,layerControlData,initEndCallBackFunction,onLayerClickEvent,drawPointEnd,onLayerControlDragCompleteEvent);
		 initContextMenu(true,true,false);
		 //}
		}
		
		function editEntityLayer(state){
			//markerEntityLayer.enableEdit(state);
			var key = "40280e814d64a6e2014d64c6fc2e0002";
			layerControl.enableEdit(true,[key]);
		}
    </script>

</head>
<body class="easyui-layout"  onload="InitMap();">
<div  data-options="region:'north',split:true" title="" style="height:50px;padding:1px;">
<input type="text" name="name"></input>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" onclick="showQueryResult()"></a>
</div>
<div id="west" data-options="region:'west',split:true" title="控制面板" style="width:280px;padding1:1px;overflow:hidden;">
		<div class="easyui-accordion" data-options="fit:true,border:false">

<div title="查询结果" data-options="selected:false" style="padding:10px;">
	<div style="background:#E1EEFE" onmouseover="this.style.backgroundColor='#E100EE';" onmouseout="this.style.backgroundColor='#E1EEFE';" onclick="centerTo1(8742,9138)">
<a href="#" >
    <h4 id ="1" >名称</h4><h4 >地址</h4>  
</a>
</div>
<div style="background:#E1EEFE" onmouseover="this.style.backgroundColor='#E100EE';" onmouseout="this.style.backgroundColor='#E1EEFE';"  onclick="centerTo1(8782,9238)">
<a href="#" >
    <h4 id ="1">名称1</h4><h4 >地址1</h4>  
</a>
</div>
<div style="background:#E1EEFE" onmouseover="this.style.backgroundColor='#E100EE';" onmouseout="this.style.backgroundColor='#E1EEFE';" onclick="centerTo1(8842,9438)">
<a href="#" >
    <h4 id ="1" >名称2</h4><h4 >地址2</h4>  
</a>
<input id="giscoords" type="text" >
<input id="gisname" type="text" >
<input id="gisid" type="text" >

</div>
</div>

<div id="layerControl" title="图层控制" data-options="selected:true" style="display:none;padding:10px;">		
</div>
</div>
</div>


<div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">east region</div>
<div id = "main" data-options="region:'center',title:''" style="width:1500px;height:900px;padding:0px;">
<div id="layer" />
<div id="mapDiv" />
</div>

</body>

</html>
